<template>
  <draggable :list="containerMetas" class="ivz-dbc-container" filter=".ivz-basic-list"
         :group="{pull: false, put: ['list', 'lec'], isDrop: isDrop}" >
    <template v-for="item in containerMetas" :key="item.id">
      <ivz-basic-list v-if="item.type == 'dl'" />
      <ivz-edit-modal v-else-if="item.type == 'modal'" :meta="item"/>
      <ivz-edit-drawer v-else-if="item.type == 'drawer'" :meta="item" />
    </template>
  </draggable>
</template>

<script>

import {EventBus, MetaEventType} from '@/event'
import {ComponentType, PathSort} from "@/store/consts";
import IvzBasicList from "@/components/list/IvzBasicList.vue";
import IvzEditDrawer from "@/components/edit/IvzEditDrawer.vue";
import IvzEditModal from "@/components/edit/IvzEditModal.vue";
import {BasicContainerTabMetas} from "@/metas/ContainerMetas";
import {MixinContainer} from "@/components/container/MixinContainer";

export default {
  name: "IvzBasicContainer",
  mixins: [MixinContainer],
  components:{IvzEditModal, IvzEditDrawer, IvzBasicList},
  created() {
    this.setContainerTabMetas(BasicContainerTabMetas);

    this.switchActiveMetaTo(this.meta)
    this.switchPathTo({name: '基础容器', type:
      ComponentType.Container, sort: PathSort.Container});

    // 监听面包屑切换事件
    EventBus.listener(MetaEventType.path, path => {
      if(path.type == ComponentType.Container) {
        this.switchActiveMetaTo(this.meta)
      }
    });
  },
}
</script>

<style scoped>
.ivz-dbc-container {
  width: 100%;
  height: 100%;
}
</style>
